<template>
	<view class="navbar" :style="{
		'height': style.navHeight,
		'padding-top': style.navPaddingTop
	}">
		<!-- 搜索框 -->
		<view class="box" :style="{ 'width': style.searchWidth}" v-if="navType == 'search'">
			<image src="../../static/arrow.png" mode="aspectFill" @click="handleBack"></image>
			<input
				type="text" 
				placeholder="请输入您要查找的车辆" 
				placeholder-style="color: #CDCDCD"
				:value="value"
				class="ipt" 
				:style="{
					'height': style.iptheight
				}"
			/>
			<view class="btn" :style="{height: style.iptheight}" @click="onSumbit">选车</view>
		</view>
		<!-- 搜索框 -->
		<!-- tabs -->
		<view class="box" :style="{ 'width': style.searchWidth }" v-if="navType == 'tabs'">
			<image src="../../static/arrow.png" mode="aspectFill" @click="handleBack"></image>
			<view class="tabs" :style="{ 'height': style.iptheight }">
				<view 
					v-for="(item, index) in lists" 
					:key="index" 
					:class="active == index && 'tabs-item-act'"
					@click="onChange(index)"
				>{{item.title}}</view>
			</view>
		</view>
		<!-- tabs -->
		<!-- 纯文本 -->
		<view class="box" :style="{ 'width': style.searchWidth }" v-if="navType == 'text'">
			<image src="../../static/arrow.png" mode="aspectFill" @click="handleBack"></image>
			<view class="box-text" :style="{ 'height': style.iptheight }">
				<view class="c-text">{{cText}}</view>
				<view class="r-text-btn" @click="onRightSumbit" v-if="isBtn">{{rText}}</view>
				<view class="r-text" @click="onRightSumbit" v-else>{{rText}}</view>
			</view>
		</view>
		<!-- 纯文本 -->
		<!-- slot -->
		<view class="box" :style="{ 'width': style.searchWidth }" v-if="navType == 'slot'">
			<image src="../../static/arrow.png" mode="aspectFill" @click="handleBack" v-if="isBackShow"></image>
			<view class="box-text" :style="{ 'height': style.iptheight }">
				<view class="c-text">{{cText}}</view>
				<slot name="right"></slot>
			</view>
		</view>
		<!-- slot -->
	</view>
</template>

<script>
	export default{
		props: {
			navType: {
				type: String,
				default: 'search'
			},
			isBackShow: {
				type: Boolean,
				default: true
			},
			isBtn: {
				type: Boolean,
				default: false
			},
			value: String,
			lists: Array,
			cText: String,
			rText: String
		},
		data() {
			return {
				style: {},
				active: 0
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			const { height, left, top, bottom } = uni.getMenuButtonBoundingClientRect();
			this.style = {
				'navHeight': (bottom - top + 10) + 'px',
				'navPaddingTop': top + 'px',
				'searchWidth': (left-10) + 'px',
				'iptheight': height + 'px'
			}
			this.$parent.navHeight = (bottom + 10) + 'px'
			this.$emit('handleNavHeight', bottom + 10)
			// #endif
			// #ifdef APP-PLUS
			const { statusBarHeight } = uni.getSystemInfoSync()
			const navH = (statusBarHeight + uni.upx2px(70))
			this.style = {
				'navHeight': '70rpx',
				'navPaddingTop': statusBarHeight + 'px',
				'searchWidth': '750rpx',
				'iptheight': '70rpx'
			}
			this.$parent.navHeight = navH + 'px'
			this.$emit('handleNavHeight', navH)
			// #endif
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					
				})
			},
			onSumbit() {
				uni.navigateTo({
					url: '/bike/carTree/index'
				})
			},
			onChange(index) {
				this.active = index
				this.$emit('onChange', index)
			},
			onRightSumbit() {
				this.$emit('onRightSumbit')
			}
		}
	}
</script>

<style scoped>
	.navbar{
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: #3791E9;
	}
	.box{
		display: flex;
		align-items: center;
	}
	.box image{
		width: 48rpx;
		min-width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}
	.ipt{
		flex: 1;
		color: #666;
		font-size: 24rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 10rpx;
	}
	.btn{
		width: 102rpx;
		background: #FFFFFF;
		border: 1px solid #3791E9;
		border-radius: 8rpx;
		margin-left: 12rpx;
		font-size: 28rpx;
		color: #3791E9;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tabs{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}
	.tabs view{
		flex: 1;
		white-space: nowrap;
		max-width: 130rpx;
		margin-right: 100rpx;
		color: #B3D9FE;
		text-align: center;
		padding-bottom: 14rpx;
		box-sizing: border-box;
	}
	.tabs view:last-child{
		margin-right: 0;
	}
	.tabs .tabs-item-act{
		color: #fff;
		border-bottom: 4rpx solid #fff;
	}
	.box-text{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #fff;
		position: relative;
	}
	.c-text{
		flex: 1;
		font-size: 32rpx;
		text-align: center;
	}
	.r-text{
		font-size: 30rpx;
	}
	.r-text-btn{
		width: 102rpx;
		height: 55rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #3791E9;
		text-align: center;
		line-height: 55rpx;
	}
</style>
